<template>
  <!-- 机票列表组件 -->
  <div class="flight-item">
    <!-- 显示部分-机票信息 -->
    <div>
      <el-row @click.native="ifShow=!ifShow" type="flex" align="middle" class="flight-info">
        <!-- 第一列 -->
        <el-col :span="6">
          <span>{{data.airline_name}}</span>
          {{data.flight_no}}
        </el-col>

        <!-- 第二列 -->
        <el-col :span="12">
          <el-row type="flex" class="flight-info-center" justify="space-between">
            <!-- 2-1列 -->
            <el-col :span="8" class="flight-airport">
              <strong>{{data.dep_time}}</strong>
              <span>{{data.org_airport_name}}{{data.org_airport_quay}}</span>
            </el-col>
            <!-- 第2-2列 -->
            <el-col :span="8" class="flight-time">
              <!-- 航班时长 -->
              <span>{{duration}}</span>
            </el-col>
            <!-- 第2-3列 -->
            <el-col :span="8" class="flight-airport">
              <strong>{{data.arr_time}}</strong>
              <span>{{data.dst_airport_name}}{{data.dst_airport_quay}}</span>
            </el-col>
          </el-row>
        </el-col>

        <!-- 第三列 -->
        <el-col :span="6" class="flight-info-right">
          ￥
          <span class="sell-price">{{data.base_price}}</span>起
        </el-col>
      </el-row>
    </div>

    <!-- 隐藏部分 -->
    <!-- 展开和收缩动画 -->
    <el-collapse-transition>
      <div class="flight-recommend" v-if="ifShow">
        <el-row type="flex" justify="space-between" align="middle">
          <el-col :span="4">低价推荐</el-col>
          <el-col :span="20">
            <el-row
              v-for="(item,index) in data.seat_infos"
              :key="index"
              type="flex"
              justify="space-between"
              align="middle"
              class="flight-sell"
            >
              <!-- 第2-1列 -->
              <el-col :span="16" class="flight-sell-left">
                <span>{{item.name}}</span>
                | {{item.supplierName}}
              </el-col>

              <!-- 第2-2列 -->
              <el-col :span="5" class="price">￥{{item.par_price}}</el-col>
              <!-- 第2-3列 -->
              <el-col :span="3" class="choose-button">
                <el-button type="warning" size="mini" @click="sendSubmit(data.id,item.seat_xid)">选定</el-button>
                <p v-if="item.code!='A'">剩余：{{item.nums}}</p>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  //父传子数据接受
  props: {
    //数据
    data: {
      //数据类型
      type: Object,
      //默认值
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      ifShow: false
    };
  },
  computed: {
    //航班时长
    duration() {
      //将时间以：分割成数组
      //1.将出发时间和到达时间转化为分钟
      //2.两个时间相减之后转化为时-分的个数
      //出发时间
      let deptime = this.data.dep_time.split(":");
      //到达时间
      let arrtime = this.data.arr_time.split(":");
      //航班时长
      let time =
        Number(arrtime[0] * 60) +
        Number(arrtime[1]) -
        Number(deptime[0] * 60) -
        Number(deptime[1]);
      //如果达到时间为第二天
      if (time < 0) {
        time = time + 24 * 60;
      }
      return Math.floor(time / 60) + "小时" + (time % 60) + "分";
    }
  },
  //方法
  methods: {
    //选定机票
    sendSubmit(id, seat_xid) {
      console.log(id);
      console.log(seat_xid);
      this.$router.push(`/air/order?id=${id}&&seat_xid=${seat_xid}`);
      console.log("坐飞机");
    }
  }
};
</script>

<style lang="less" scoped>
.flight-item {
  border: 1px solid #ddd;
  margin-bottom: 10px;
  .flight-info {
    padding: 15px;
    cursor: pointer;
    > div {
      &:first-child,
      &:last-child {
        text-align: center;
      }
    }
    //第二列样式
    .flight-info-center {
      padding: 0 30px;
      text-align: center;
      //2-1 对应起飞时间
      .flight-airport {
        strong {
          display: block;
          font-size: 24px;
          font-weight: normal;
        }
        span {
          font-size: 12px;
          color: #999;
        }
      }
      //2-2 旅程时长
      .flight-time {
        span {
          display: inline-block;
          padding: 10px 0;
          border-bottom: 1px solid #eee;
          color: #999;
        }
      }
    }
    //第三列 对应价格
    .flight-info-right {
      .sell-price {
        font-size: 24px;
        color: orange;
        margin: 0 2px;
      }
    }
  }

  //隐藏部分
  .flight-recommend {
    background: #f6f6f6;
    border-top: 1px solid #eee;
    padding: 0 20px;
    //第二列
    .flight-sell {
      border-bottom: 1px solid #eee;
      padding: 10px 0;
      &:last-child {
        border-bottom: none;
      }
      //对应起飞时间 下方
      .flight-sell-left {
        font-size: 12px;
        span {
          color: green;
        }
      }
      //价格
      .price {
        font-size: 20px;
        color: orange;
      }
      //选定按钮
      .choose-button {
        text-align: center;
        color: #666;
        button {
          display: block;
          width: 100%;
          margin-bottom: 5px;
        }
      }
    }
  }
}
</style>